export let fullScreenMixin = {
  methods: {
    intoFullScreen() {
      let isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement
      let el = document.documentElement
      if (!isFullscreen) { // 进入全屏,多重短路表达式
        (el.requestFullscreen && el.requestFullscreen() + el.addEventListener('fullscreenchange', this.fullscreenCallback)) ||
        (el.mozRequestFullScreen && el.mozRequestFullScreen() + el.addEventListener('mozfullscreenchange', this.fullscreenCallback)) ||
        (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) + el.addEventListener('webkitfullscreenchange', this.fullscreenCallback) ||
        (el.msRequestFullscreen && el.msRequestFullscreen() + (document.onmsfullscreenchange = this.fullscreenCallback))
      }
    },
    leaveFullscreen() {
      document.exitFullscreen ? document.exitFullscreen()
        : document.mozCancelFullScreen ? document.mozCancelFullScreen()
          : document.webkitExitFullscreen ? document.webkitExitFullscreen()
            : document.msExitFullscreen ? document.msExitFullscreen() : ''
    },
    fullscreenCallback(params) {
      // 离开时全屏 参数为null，进入后才能通过 fullscreenElement 获得到html根元素
      // 所以我们根据获取参数的特性来判断它进入还是离开全屏
      // 如果浏览器不支持此参数则返回undefind
      // 现在谷歌+火狐+safari等内核浏览器都支持fullscreenElement，所以只需要判断IE浏览器的API即可
      let fullIE = document.msFullscreenElement
      let otherBrowser = document.fullscreenElement
      if ((otherBrowser === null) || (fullIE === null)) { // 离开全屏
        this.$store.dispatch('app/closeBoundary', false)
        let el = document.documentElement;
        // 离开就销毁监听事件，因为在每次点击的时候都会重新对事件进行绑定
        (el.requestFullscreen && el.removeEventListener('fullscreenchange', this.fullscreenCallback)) ||
        (el.mozRequestFullScreen && el.removeEventListener('mozfullscreenchange', this.fullscreenCallback)) ||
        (el.webkitRequestFullscreen && el.removeEventListener('webkitfullscreenchange', this.fullscreenCallback)) ||
        (el.msRequestFullscreen && (document.onmsfullscreenchange = null))
      } else { // 进入全屏
        this.$store.dispatch('app/closeBoundary', true)
      }
    }
  }
}
